<template>
	<!-- 修改密码 -->
	<el-dialog v-model="state.changePasswordDialog" title="修改密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition" :rules="rules">
			<el-form-item label="请输入您的旧密码" prop="oldPassword">
				<el-input v-model="forgetData.oldPassword" placeholder="请输入您的旧密码"></el-input>
			</el-form-item>
			<el-form-item label="请输入您的新密码" prop="newPassword">
				<el-input v-model="forgetData.newPassword" placeholder="请确认您的新密码"></el-input>
			</el-form-item>
		</el-form>
		 <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="state.changePasswordDialog = false">关闭</el-button>
		        <el-button type="primary" @click="resetPassword">
		          确定
		        </el-button>
		      </div>
		    </template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ref,reactive } from 'vue'
	import { changePassword } from '@/api/userinfor'
	import { ElMessage } from 'element-plus'
	import { userUserInfor } from "@/store/userinfor.js"
	import { useRouter } from 'vue-router'
	const router = useRouter();
	interface formData{
		oldPassword:string,
		newPassword:string,
	}
	const info = userUserInfor();
	const labelPosition = ref("top")
	
	const forgetData:formData = reactive({
		oldPassword:"",
		newPassword:""
	})
	// 表单规则
	const rules = reactive({
		oldPassword:[
			{required:true,message:"请输入你的旧密码",trigger:"blur"},
		],
		newPassword:[
			{required:true,message:"请输入你的新密码",trigger:"blur"},
		]
	})
	
	const state = reactive({
		dialogVisible:false,
		changePasswordDialog:false,
	})
	// 修改密码
	const resetPassword = async () => {
		const id = info.id;
		const oldPassword = forgetData.oldPassword
		const newPassword = forgetData.newPassword
		if(!(oldPassword && newPassword)) return ElMessage({
			message:"请先输入密码",
			type:"error"
		})
		const res = await changePassword(id,oldPassword,newPassword);
		console.log(res,33)
		if(res.data.status==1){
			ElMessage({
				message:res.data.message,
				type:"error"
			})
		}else{
			ElMessage({
				message:"修改成功",
				type:"success"
			})
			state.changePasswordDialog = false
			router.push("/login")
		}
	}
	// 打开弹出
	const open = ()=>{
		state.changePasswordDialog = true
	}
	// 向外暴露open
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
</style>